<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="foodName"
              size="medium"
              placeholder="查询用户名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="success"
              icon="el-icon-search"
              @click="getProducts()"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="">
            <el-button
              size="small"
              @click="notEmpty"
              type="warning"
              icon="el-icon-delete-solid"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <!-- <el-table
          :data="deviceDetails"
          border
          v-loading="loadFlag"
          tooltip-effect="dark"
          @selection-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table
          :data="deviceDetails"
          border
          v-loading="loadFlag"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column prop="productName" label="商品名称" width="">
          </el-table-column>
          <el-table-column prop="productNumber" label="商品编号" width="">
          </el-table-column>

          <el-table-column prop="productBarcode" label="商品条码" width="">
          </el-table-column>
          <el-table-column prop="productSpecifications" label="规格型号">
          </el-table-column>
          <el-table-column prop="productCategory" label="商品类别">
          </el-table-column>
          <el-table-column prop="warehouseId" label="首选仓库">
          </el-table-column>
          <el-table-column prop="unit" label="单位"> </el-table-column>
          <el-table-column prop="unitPrice" label="单价"> </el-table-column>
        </el-table>
        <div class="pagingClass">
          <el-pagination
            :page-sizes="m_page.sizes"
            :page-size="m_page.size"
            :current-page="m_page.number"
            @size-change="m_handleSizeChange"
            @current-change="m_handlePageChange"
            layout="total,sizes,prev, pager, next"
            background
            :total="m_page.totalElements"
          ></el-pagination>
        </div>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="closeCalendar">取消</el-button>
          <el-button type="primary" @click="determine()">确 定</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadFlag: false, //加载flag
      foodName: "",
      deviceDetails: [],
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
      multipleSelection: [],
      canceloff: false,
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.getProducts();
  },
  methods: {
    determine() {
      console.log(this.multipleSelection);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.$emit("saveCalendar", val);
    },
    closeCalendar() {
      this.$emit("closeCalendar", this.canceloff);
    },
    notEmpty() {
      this.foodName = "";
      this.getProducts();
    },
    getProducts() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/ProductInformation",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          stockType: 3,
          query: {
            productName: this.foodName,
          },
        },
      }).then((res) => {
        // console.log(res);
        this.deviceDetails = res.data.data;
        this.m_page.totalElements = res.data.count;
        this.loadFlag = false;
      });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.getProducts();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.getProducts();
    },
  },
};
</script>

<style scoped>
</style>